<template>
  <!--考试-->
  <!--<div class="exam" v-if="examDetail">-->
  <div class="exam">
    <!--过滤栏-->
    <div class="filter-container">
      <div class=" filter-item item-dropDown" style="margin-right: 2px">
        <el-dropdown>
          <el-button type="primary">
            {{examStatus}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handlerExamStatus('IN_EXAMINATION')">考试中</el-dropdown-item>
              <el-dropdown-item @click="handlerExamStatus('PRE_EXAM')">未开考</el-dropdown-item>
              <el-dropdown-item @click="handlerExamStatus('OVER')">已结束</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <div class="filter-item item-input">
        <el-input v-model.trim="search.condition.examName" placeholder="请输入考试名称"></el-input>
      </div>
      <div class="filter-item item-button">
        <el-button type="primary" @click="searchExam"><i class="el-icon-search"></i> 搜 索</el-button>
      </div>
      <div class="filter-item item-button">
        <el-button type="primary" @click="requestExam(),examInput = ''"><i class="el-icon-refresh"></i> 刷新
        </el-button>
      </div>
      <div class="filter-item item-button">
        <el-button type="primary" @click="toCreateExam"><i class="el-icon-s-flag"></i> 创建考试</el-button>
      </div>
    </div>
  </div>

  <!--TODO 考试列表-->
  <div class="exam-list">
    <el-table
        v-loading="examLoading"
        :element-loading-svg="svg"
        class="custom-loading-svg"
        element-loading-svg-view-box="-10, -10, 50, 50"
        :data="exanTables"
        border
        style="width: 100%;"
        :table-layout="auto">
      <el-table-column
          label="序号"
          width="60"
          align="center">
        <template v-slot="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
          prop="examName"
          label="考试名称"
          width="100"
          align="center">
        <template v-slot="scope">
          <el-tooltip content="查看考试详情" placement="top">
                            <span class="col2-cell-style"
                                  @click="viewExamDetail(scope.row)">{{ scope.row.examName }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
          prop="classIdName"
          label="考试班级"
          width="100"
          align="center">
      </el-table-column>
      <el-table-column
          prop="companyIdName"
          label="公司"
          width="100"
          align="center">
      </el-table-column>
      <!--<el-table-column-->
      <!--    prop="paperId"-->
      <!--    label="试卷"-->
      <!--    width="100"-->
      <!--    align="center">-->
      <!--</el-table-column>-->
      <el-table-column
          prop="durationTime"
          label="考试时长(分钟）"
          width="100"
          align="center">
      </el-table-column>
      <el-table-column
          prop="startTime"
          label="开考时间"
          width="100"
          align="center">
      </el-table-column>
      <el-table-column
          prop="endTime"
          label="结束时间"
          width="100"
          align="center">
      </el-table-column>
      <el-table-column
          prop="creatorIdName"
          label="创建人"
          width="100"
          align="center">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="100"
          align="center">
      </el-table-column>
      <el-table-column
          prop="examType"
          label="考试类型"
          width="100"
          align="center">
        <template v-slot="scope">
          <el-tag v-if="scope.row.examType == 'TRAINING_EXAM'" type="success" disable-transitions>培训考试</el-tag>
          <el-tooltip content="该场考试正在考试中" placement="top">
            <el-tag v-if="scope.row.examType == 'CERTIFICATION_EXAM'" type="info" disable-transitions>认证考试</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column
          prop="examStatus"
          label="考试状态"
          width="100"
          align="center">
        <template v-slot="scope">
          <el-tag v-if="scope.row.examStatus == 'IN_EXAMINATION'" type="success" disable-transitions>考试中</el-tag>
          <el-tooltip content="该场考试正在考试中" placement="top">
            <el-tag v-if="scope.row.examStatus == 'PRE_EXAM'" type="info" disable-transitions>未开考</el-tag>
          </el-tooltip>
          <el-tag v-if="scope.row.examStatus == 'OVER'" type="warning" disable-transitions>已结束</el-tag>
          <el-tag v-if="scope.row.examStatus == '3'" type="danger" disable-transitions>阅卷中</el-tag>
          <el-tooltip content="该场考试已完成阅卷" placement="top">
            <el-tag v-if="scope.row.disabled == 4" disable-transitions>已阅卷</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <!--<el-table-column-->
      <!--    prop="disabled"-->
      <!--    label="状态"-->
      <!--    width="80"-->
      <!--    align="center">-->
      <!--  <template v-slot="scope">-->
      <!--    <el-tag v-if="scope.row.disabled == true" type="warning" disable-transitions>启用</el-tag>-->
      <!--    <el-tag v-if="scope.row.disabled == false" type="danger" disable-transitions>弃用</el-tag>-->
      <!--  </template>-->
      <!--</el-table-column>-->
      <el-table-column
          prop="applicantNum"
          label="应到人数"
          width="80"
          align="center">
      </el-table-column>
      <el-table-column
          prop="attendNum"
          label="实到人数"
          width="80"
          align="center">
      </el-table-column>
      <el-table-column label="操作" width="400">
        <template v-slot="scope">
          <div class="button-container">
            <el-button
                size="small"
                type="success"
                v-if="scope.row.examStatus == 'PRE_EXAM'||scope.row.examStatus == 'OVER'"
                @click="startExam(scope.row)">开始
            </el-button>
            <el-button
                size="small"
                type="danger"
                v-if="scope.row.examStatus == 'IN_EXAMINATION'"
                @click="endExam(scope.row)">结束
            </el-button>
            <!--<el-tooltip content="手动评阅全部有提交记录的考生答卷" placement="top">-->
            <!--  <el-button-->
            <!--      size="small"-->
            <!--      type="primary"-->
            <!--      v-if="(scope.row.examStatus == 'IN_EXAMINATION') || (scope.row.examStatus == 'OVER')"-->
            <!--      @click="reviewPapers(scope)">手动阅卷-->
            <!--  </el-button>-->
            <!--</el-tooltip>-->
            <el-button
                size="small"
                type="danger"
                v-if="scope.row.disabled == false"
                @click="openUpdateDialog(scope.row)">修改
            </el-button>
            <el-button
                size="small"
                type="danger"
                v-if="scope.row.disabled == false"
                @click="deleteExaminee(scope.row) ">禁用
            </el-button>
          </div>
        </template>

      </el-table-column>
    </el-table>
  </div>


  <el-pagination
      v-model:current-page="search.paging.pageIndex"
      v-model:page-size="search.paging.pageSize"
      :page-sizes="[5, 10, 20, 100]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      v-model:total="search.paging.totalCount"
      @size-change="searchExam"
      @current-change="searchExam"
  />


  <!--TODO 查看考试详情 对话框-->
  <!--v-if="toViewExamDetail"-->
  <el-dialog title="查看考试详情" v-model="toViewExamDetail" fullscreen v-if="toViewExamDetail">
    <div class="header-title">
      <span>{{ examTitle }}</span>
      <el-progress type="circle" class="filter-item"
                   :percentage="alreadySubmitCandidateCount/this.examClassStuList.length * 100"
                   :width="60" color="#67C23A" :show-text="false"></el-progress>
      &nbsp;
      &nbsp;
      <span class="filter-item">{{ alreadySubmitCandidateCount }} (已交) / {{
          this.examClassStuList.length
        }} (总人数)</span>
    </div>
    <!--过滤栏-->
    <div class="filter-bar">
      <el-input
          placeholder="请输入完整考生号搜索"
          v-model.trim="examSituation.condition.userId"
          clearable
          class="filter-item">
      </el-input>
      <el-button type="primary" class="filter-item" @click="getExamClassStu()"><i
          class="el-icon-search "></i> 搜索
      </el-button>
      <el-button type="primary" class="filter-item item-margin-left-16" @click="examSituation.condition.userId=null,getExamClassStu()">
        <i class="el-icon-refresh"></i> 刷新
      </el-button>
      <!--<el-button type="primary" class="filter-item item-margin-left-16" @click="take_up(curExamIndex)"><i-->
      <!--class="el-icon-upload"></i> 收卷-->
      <!--</el-button>-->
      <!--                <a href="'http://localhost:8080/userExcel?exam_id='+examDetail[curExamIndex].examId" style="text-decoration:none">-->
      <el-tooltip content="下载本场考试所有考生的成绩汇总表" placement="top">
        <el-button type="primary" class="filter-item item-margin-left-16" @click="downloadExcel()">
          <i class="el-icon-document"></i> 下载成绩
        </el-button>
      </el-tooltip>
      <!--                </a>-->
      <el-tooltip content="下载考生提交时间差值" placement="top">
        <el-button type="primary" class="filter-item item-margin-left-16" @click="downloadZip">
          <i class="el-icon-receiving"></i> 作弊检测
        </el-button>
      </el-tooltip>
      <el-button type="primary" class="filter-item item-margin-left-16" @click="requestPaperDetail">
        <i class="el-icon-view"></i> 查看原卷
      </el-button>
      <el-tooltip content="一键批量评阅本场考试所有试卷" placement="top">
      <el-button type="primary" class="filter-item item-margin-left-16" @click="batchMarking">
        <i class="el-icon-view"></i> 批量阅卷
      </el-button>
      </el-tooltip>

      <!--<el-tooltip content="下载本场考试所有考生提交各题目时间差值的汇总表" placement="top">-->
      <!--  <el-button type="primary" class="filter-item item-margin-left-16" @click="gradeCheck">-->
      <!--    <i class="el-icon-camera-solid"></i> 作弊检测-->
      <!--  </el-button>-->
      <!--</el-tooltip>-->
      <!--<el-tooltip content="下载本场考试的重复率检测报告" placement="top">-->
      <!--  <el-button type="primary" class="filter-item item-margin-left-16" @click="downloadRepCheckReport">-->
      <!--    <i class="el-icon-s-opportunity"></i> 查重报告-->
      <!--  </el-button>-->
      <!--</el-tooltip>-->
      <el-button type="primary" class="filter-item item-margin-left-16" @click="toViewExamDetail = false">
        <i class="el-icon-circle-close"></i> 关闭页面
      </el-button>
    </div>
    <!--考生表格-->
    <el-table
        @sort-change="changeCandidateTableSort"
        v-loading.fullscreen.lock="loading"
        element-loading-text="阅卷中，请勿刷新或跳转到其他页面，耗时可能较长，请耐心等待"
        :data="this.examClassStuList"
        border
        style="width: 100%"
        id="exportExcel">
      <el-table-column
          label="序号"
          width="80"
          align="center">
        <template v-slot="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
          label="考生号"
          prop="userId"
          :sortable="'custom'"
          width="180"
          align="center">
      </el-table-column>
      <el-table-column
          label="姓名"
          prop="username"
          width="160"
          align="center">
        <!--<template v-slot="scope">-->
        <!--<el-tooltip content="查看考生答題情況和修改评分" placement="top">-->
        <!--                  <span class="col2-cell-style"-->
        <!--                        @click="reviewStuPaper()">{{ scope.row.userName }}</span>-->
        <!--</el-tooltip>-->
        <!--</template>-->
      </el-table-column>
      <el-table-column
          label="成绩"
          prop="score"
          :sortable="'custom'"
          width="80"
          align="center">
      </el-table-column>
      <el-table-column
          label="所属班级"
          prop="className"
          width="200"
          align="center">
      </el-table-column>
      <el-table-column
          label="登录IP"
          prop="ip"
          width="150"
          align="center">
      </el-table-column>
      <el-table-column
          label="进入时间"
          prop="enterTime"
          width="160"
          align="center">
      </el-table-column>
      <el-table-column
          label="提交时间"
          prop="submitTime"
          width="160"
          align="center">
      </el-table-column>
      <el-table-column
          label="用时(分)"
          prop="time"
          :sortable="'custom'"
          width="80"
          align="center">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          width="80"
          align="center">
        <template v-slot="scope">
          <!--  <el-tooltip content="学生还没有进入考试" placement="top">-->
          <el-tag v-if="scope.row.status == 'NOT_STARTED'" type="danger" disable-transitions>未评分</el-tag>
          <!--  </el-tooltip>-->
          <!--  <el-tooltip content="学生进入了考试，但是没有提交试卷" placement="top">-->
          <el-tag v-else type="info" disable-transitions>已评分</el-tag>
          <!--  </el-tooltip>-->
          <!--  <el-tag v-if="scope.row.status == 2" type="warning" disable-transitions>未评分</el-tag>-->
          <!--  <el-tag v-if="scope.row.status == 3" disable-transitions>已评分</el-tag>-->
          <!--  <el-tooltip content="学生答卷由教师检查和重新评分" placement="top">-->
          <!--    <el-tag v-if="scope.row.status == 4" type="success" disable-transitions>已审阅</el-tag>-->
          <!--  </el-tooltip>-->
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="scope">

            <!--<el-button type="primary"  @click="gradeAll(scope.row)" size="small">-->
            <!--  <i class="el-icon-position"></i> 一键阅卷-->
            <!--</el-button>-->
          <el-button
              size="small"
              type="primary"
              @click="reseteExamine(scope.row)"
          >
            重置考试
          </el-button>
          <el-button
              size="small"
              type="primary"
              @click="resetIp(scope.row)"
          >
            重置IP
          </el-button>
          <el-button
              size="small"
              type="info"
              @click="delayStuTimeDialog=true,tempStu=scope.row"
          >延迟考试
          </el-button>
          <el-tooltip content="手动评阅全部有提交记录的考生答卷" placement="top">
            <el-button
                size="small"
                type="success"
                @click="reviewStuPaper(scope.row)"
            >手动阅卷
            </el-button>
          </el-tooltip>
          <el-tooltip content="查看考生的人物画像" placement="top">
            <el-button
                size="small"
                type="success"
                @click="checkStuPicture(scope.row)"
            >人物画像
            </el-button>
          </el-tooltip>
          <!--TODO 监考画面-->
          <el-tooltip content="查阅本场考试所有的截屏画面" placement="top">
            <el-button
                size="small"
                type="success"  @click="showInvigilate(scope.row)">
              监考画面
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
        v-model:current-page="examSituation.paging.pageIndex"
        v-model:page-size="examSituation.paging.pageSize"
        :page-sizes="[100, 200, 300, 400]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="examSituation.paging.totalCount"
        @size-change="getExamClassStu"
        @current-change="getExamClassStu"
    />

    <el-dialog
    ></el-dialog>

  </el-dialog>


  <!--TODO 查看学生考试详情-->
  <el-dialog title="" v-model:="toReviewStuPaper" top="2vh" width="80%" v-if="toReviewStuPaper">
    <div class="stu-paper-container">
      <div class="stu-paper-header">
        <!--                    <h1>湘潭大学_____年计算机专业上机考试</h1>-->
        <h1>{{ examTitle }}</h1>
        <el-row :gutter="0">
          <el-col :span="5">
            <h3>考试总分：{{ stuExamInfo.total }}</h3>
          </el-col>
          <el-col :span="5">
            <!--<h3>出卷人：{{ stuExamInfo.creator }}</h3>-->
          </el-col>
          <el-col :span="5">
            <h3>考生号：{{ stuExamInfo.stuId }}</h3>
          </el-col>
          <el-col :span="5">
            <h3>姓名：{{ stuExamInfo.name }}</h3>
          </el-col>
          <el-col :span="4">
            <h3>得分：{{ stuExamInfo.score }}</h3>
          </el-col>
        </el-row>
      </div>
      <div class="obj" v-if="stuExamInfo.objQuestionList!==null&&stuExamInfo.objQuestionList.length!==0">
        <h3>客观题</h3>
        <!--:disabled="stuExamInfo.objQuestionList[index].singleQuesScore.score == null"-->
        <div class="stu-paper-content"
             v-for="(item,index) in stuExamInfo.objQuestionList">
          <h2>第 {{ index + 1 }} 题
            <el-input-number v-if="item.singleQuesScore.score!==false" style="float: right" size="mini" v-model="item.singleQuesScore.score" :min="0"
                             :max="100" label="分数"  :disabled="false"

            ></el-input-number>
            <el-input-number v-if="item.singleQuesScore.score===false" style="float: right" size="mini" :min="0"
                             :max="100" label="学生没有作答，无法评分"
                              :disabled="true"
            ></el-input-number>
          </h2>
          <h4 style="clear: both">【题目描述】</h4>
          <p v-html="item.problem_description"></p>
          <h4>【学生答案】</h4>
          <div class="stu-answer" v-highlight>
                        <pre>
                            <code :class="java">{{ item.content }}</code>
                        </pre>
            <!--<div :class="stuPaper[index].language" v-html="stuPaper[index].answer"></div>-->
          </div>
        </div>
      </div>

      <h3>编程题</h3>
      <div class="stu-paper-content"
           v-for="(item,index) in stuExamInfo.proQuestionList">
        <h2>第 {{ index + 1 }} 题
          <el-input-number  v-if="item.singleQuesScore.score!==false" style="float: right" size="mini" v-model="item.singleQuesScore.score" :min="0"
                           :max="100" label="分数" :disabled="false"

          ></el-input-number>
          <el-input-number v-if="item.singleQuesScore.score===false" style="float: right" size="mini" :min="0"
                           :max="100" label="学生没有作答，无法评分"
                           :disabled="true"
          ></el-input-number>
        </h2>
        <h4 style="clear: both">【题目描述】</h4>
        <p v-html="item.problem_description"></p>
        <h4>【学生答案】</h4>
        <div class="stu-answer" v-highlight>
                        <pre>
                            <code :class="java">{{ item.content }}</code>
                        </pre>
          <!--<div :class="stuPaper[index].language" v-html="stuPaper[index].answer"></div>-->
        </div>
      </div>
      <div class="stu-paper-footer">
        <el-button
            @click="toReviewStuPaper = false">取 消
        </el-button>
        <!--v-if="examDetail[curExamIndex].examineeData[curStuIndex].status >= 3"-->
        <el-button

            type="primary"
            @click="confirmReviewStuPaper()">
          提交分数
        </el-button>
      </div>
      <!--TODO 手动阅卷-->
      <div class="stuExamImg">
        <h1>考试截图</h1>
        <div class="imgList" >
          <el-image
              v-for="(img,index) in stuExamInfo.imgList" :key="index"
              style="width: 100px; height: 100px"
              :src="'http://42.194.189.207'+img.url"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :initial-index="4"
          />
        </div>
      </div>
    </div>
  </el-dialog>


  <!--TODO 创建考试-->
  <el-dialog v-model="createExamVisible" title="创建考试" width="500">
    <el-form :model="createExamDetail" :rules="PaperRule">
      <el-form-item label="请输入考试名称" :label-width="formLabelWidth" prop="examName">
        <el-input v-model.trim="createExamDetail.examName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="班级名称" label-width="formLabelWidth" prop="classId">
        <el-select
            v-model="createExamDetail.classId"
            class="m-2"
            placeholder="请选择班级"
            size="large"
            style="width: 240px"
        >
          <el-option clearable
              v-for="item in AllClass"
              :key="item.id"
              :label="item.className"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <!--<el-form-item label="请输入公司名称" :label-width="formLabelWidth"  prop="companyId">-->
      <!--  <el-select-->
      <!--      v-model="createExamDetail.companyId"-->
      <!--      class="m-2"-->
      <!--      placeholder="Select"-->
      <!--      size="large"-->
      <!--      style="width: 240px"-->
      <!--      filterable-->
      <!--  >-->
      <!--    <el-option-->
      <!--        v-for="item in AllCompany"-->
      <!--        :key="item.id"-->
      <!--        :label="item.name"-->
      <!--        :value="item.id">-->
      <!--    </el-option>-->
      <!--  </el-select>-->
      <!--</el-form-item>-->
      <el-form-item label="选择试卷" label-width="formLabelWidth"  prop="paperId">
        <el-select
            v-model="createExamDetail.paperId"
            class="m-2"
            placeholder="请选择试卷"
            size="large"
            style="width: 240px"
            filterable
        >
          <el-option
              v-for="item in AllPaper"
              :key="item.id"
              :label="item.title"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请选择开始时间" label-width="formLabelWidth" prop="startTime" >
        <div class="block">
          <el-date-picker
              v-model="createExamDetail.startTime"
              type="datetime"
              format="YYYY/MM/DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择开始时间"/>
        </div>
      </el-form-item>
      <el-form-item label="请选择结束时间" label-width="formLabelWidth" prop="endTime">
        <div class="block">
          <el-date-picker
              v-model="createExamDetail.endTime"
              type="datetime"
              format="YYYY/MM/DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择开始时间"/>
        </div>
      </el-form-item>
      <el-form-item label="持续时间" label-width="formLabelWidth" prop="durationTime">
        <el-input-number v-model="createExamDetail.durationTime" :step="1" :max="600" />
        <span>分钟</span>
      </el-form-item>
      <el-form-item label="考试类型" label-width="formLabelWidth" prop="examType">
        <el-select
            v-model="createExamDetail.examType"
            class="m-2"
            placeholder="请选择考试类型"
            size="large"
            style="width: 240px"
        >
          <el-option label="培训考试" value="TRAINING_EXAM"></el-option>
          <el-option label="认证考试" value="CERTIFICATION_EXAM"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="语言类型" label-width="formLabelWidth" prop="languageType">

        <el-select
            v-model="createExamDetail.languageType"
            class="m-2"
            placeholder="请选择语言类型"
            size="large"
            style="width: 240px"
        >
          <el-option
              v-for="item in AllLanguage"
              :key="item.id"
              :label="item.name"
              :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <!--<el-form-item label="应到人数" label-width="formLabelWidth" prop="applicantNum">-->
      <!--  <el-input-number v-model="createExamDetail.applicantNum" :precision="0" :step="1" :max="10000"/>-->
      <!--  <span>人</span>-->
      <!--</el-form-item>-->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="createExamVisible = false ">取消</el-button>
        <el-button type="primary" @click="createExam">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!--TODO 修改考试-->
  <el-dialog v-model="updateExamVisible" title="修改考试" width="500">
    <el-form :model="updatePaperForm" :rules="PaperRule" >
      <el-form-item label="请输入考试名称" :label-width="formLabelWidth"  prop="examName">
        <el-input v-model.trim="updatePaperForm.examName" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="班级名称" label-width="formLabelWidth"  prop="classId">
        <el-select
            v-model="updatePaperForm.classId"
            class="m-2"
            placeholder="Select"
            size="large"
            style="width: 240px"
        >
          <el-option
              v-for="item in AllClass"
              :key="Number(item.id)"
              :label="item.className"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <!--<el-form-item label="请输入公司名称" :label-width="formLabelWidth"  prop="companyId">-->
      <!--  <el-select-->
      <!--      v-model="updatePaperForm.companyId"-->
      <!--      class="m-2"-->
      <!--      placeholder="Select"-->
      <!--      size="large"-->
      <!--      style="width: 240px"-->
      <!--  >-->
      <!--    <el-option-->
      <!--        v-for="item in AllCompany"-->
      <!--        :key="Number(item.id)"-->
      <!--        :label="item.name"-->
      <!--        :value="Number(item.id)">-->
      <!--    </el-option>-->
      <!--  </el-select>-->
      <!--</el-form-item>-->
      <el-form-item label="选择试卷" label-width="formLabelWidth"  prop="paperId">
        <el-select
            v-model="updatePaperForm.paperId"
            class="m-2"
            placeholder="Select"
            size="large"
            style="width: 240px"
            filterable
        >
          <el-option
              v-for="item in AllPaper"
              :key="item.id"
              :label="item.title"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请选择开始时间" label-width="formLabelWidth"  prop="startTime">
        <div class="block">
          <el-date-picker
              v-model="updatePaperForm.startTime"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择开始时间"/>
        </div>
      </el-form-item>
      <el-form-item label="请选择结束时间" label-width="formLabelWidth"  prop="endTime">
        <div class="block">
          <el-date-picker
              v-model="updatePaperForm.endTime"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择开始时间"/>
        </div>
      </el-form-item>
      <el-form-item label="持续时间" label-width="formLabelWidth" prop="durationTime">
        <el-input-number v-model="updatePaperForm.durationTime" :precision="2" :step="0.1" :max="10"/>
        <span>分钟</span>
      </el-form-item>
      <el-form-item label="考试类型" label-width="formLabelWidth" prop="examType">
        <el-select
            v-model="updatePaperForm.examType"
            class="m-2"
            placeholder="Select"
            size="large"
            style="width: 240px"
        >
          <el-option label="培训考试" value="TRAINING_EXAM"></el-option>
          <el-option label="认证考试" value="CERTIFICATION_EXAM"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="语言类型" label-width="formLabelWidth"  prop="languageType">

        <el-select
            v-model="updatePaperForm.languageType"
            class="m-2"
            placeholder="Select"
            size="large"
            style="width: 240px"
        >
          <el-option
              v-for="item in AllLanguage"
              :key="item.id"
              :label="item.name"
              :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <!--<el-form-item label="应到人数" label-width="formLabelWidth" prop="applicantNum">-->
      <!--  <el-input-number v-model="updatePaperForm.applicantNum" :precision="0" :step="1" :max="10"/>-->
      <!--  <span>人</span>-->
      <!--</el-form-item>-->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateExamVisible=false ">取消</el-button>
        <el-button type="primary" @click="UpdateExaminee">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 人物画像 -->
  <el-dialog title="人物画像" v-model="toviewChart" top="2vh" width="80%">
    <el-row>
      <el-col :span="4">
      </el-col>
      <el-col :span="12"><h1 style="margin-left: 50%">用户报告</h1></el-col>

    </el-row>
    <div class="header">
      <div>
        <h3 class="partview">
          <el-icon>
            <Tickets/>
          </el-icon>
          考生信息
        </h3>
        <el-descriptions
            class="margin-top"
            :column="2"
            size="large"
            style="blockMargin"
        >
          <el-descriptions-item label="考生名">{{ usermessage.username }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div>
        <h3 class="partview">
          <el-icon>
            <Tickets/>
          </el-icon>
          综合评价
        </h3>

        <span v-if="usermessage.comprehensiveEvaluationDto"> 分数:{{ usermessage.comprehensiveEvaluationDto.score }}</span>
        <span v-if="usermessage.comprehensiveEvaluationDto"> 排名:{{ usermessage.comprehensiveEvaluationDto.sort }}</span>
      </div>
    </div>
    <br>



    <h3 class="partview">
      <el-icon>
        <Tickets/>
      </el-icon>
      异常风险提示
    </h3>
    <el-table :data="mergedData" v-if="usermessage.abnormalRiskWarningDto">
      <el-table-column prop="questionName" label="问题名称"></el-table-column>
      <el-table-column prop="rate" label="重复率"></el-table-column>
      <el-table-column prop="duplicateUsername" label="代码最相似的人"></el-table-column>
      <el-table-column prop="selfSubmitTime" label="本人提交时间"></el-table-column>
      <el-table-column prop="targetSubmitTime" label="他的提交时间"></el-table-column>
      <el-table-column prop="timeInterval" label="时间插值"></el-table-column>
    </el-table>

    <br>
<!--    <h3 class="partview">-->
<!--      <el-icon>-->
<!--        <Tickets/>-->
<!--      </el-icon>-->
<!--      成绩详情-->
<!--    </h3>-->
<!--    <el-table :data="scoreTable" style="width: 100%">-->
<!--      <el-table-column prop="type" label="题型" width="180"/>-->
<!--      <el-table-column prop="score" label="得分" width="180"/>-->
<!--      <el-table-column prop="total_score" label="满分" width="180"/>-->
<!--      <el-table-column prop="right_ques" label="正确题数" width="180"/>-->
<!--      <el-table-column prop="total_ques" label="总题数" width="180"/>-->
<!--      <el-table-column prop="rank" label="排名" width="180"/>-->
<!--      <el-table-column prop="total_rank" label="排名总人数" width="180"/>-->
<!--      <el-table-column prop="test_time" label="用时" width="180"/>-->
<!--      <el-table-column prop="marking" label="是否阅卷" width="180"/>-->
<!--    </el-table>-->
<!--    <br>-->
    <h3 class="partview">
      <el-icon>
        <Tickets/>
      </el-icon>
      每题运行情况
    </h3>
    <el-table :data="usermessage.codeSummarizeDtos" style="width: 100%" v-if="usermessage.codeSummarizeDtos.length!==0">
      <el-table-column prop="questionName" label="题目名称" width="180"/>
      <el-table-column prop="score" label="得分" width="180"/>
      <el-table-column prop="language" label="使用语言" width="180"/>
      <el-table-column prop="usedMemory" label="占用内存" width="180"/>
      <el-table-column prop="runTime" label="运行时间" width="180"/>
<!--      <el-table-column prop="thinking" label="思路" width="180"/>-->
<!--      <el-table-column prop="codeSpecification" label="代码规范" width="180"/>-->
      <el-table-column prop="scoreOrder" label="排名" width="180"/>
    </el-table>

    <br>
    <h3 class="partview">
      <el-icon>
        <Tickets/>
      </el-icon>
      历史成绩记录
    </h3>
    <el-table :data="usermessage.durationScoreRecordDto" style="width: 100%" v-if="usermessage.durationScoreRecordDto">
      <el-table-column prop="score" label="分数"/>
      <el-table-column prop="sort" label="排名"/>
      <el-table-column prop="examOrder" label="顺序"/>
    </el-table>
    <h3 v-else>暂无历史成绩</h3>
    <br>

    <h3 class="partview">
      <el-icon>
        <Tickets/>
      </el-icon>
      技能图谱
    </h3>

    <div class="echarts-box">
      <div ref="chartContainer" style="margin-left:50px; width: 900px; height: 300px;"></div>
    </div>
<!--        <Skillpicture :skillMapDtoList="usermessage.skillMapDtoList" v-if="usermessage.skillMapDtoList.length!==0"/>-->
    <br>
    <h3 class="partview">
      <el-icon>
        <Tickets/>
      </el-icon>
      编程能力
    </h3>

<!--    <div>-->
<!--      <Radar :codeCapacities="usermessage.codeCapacities" v-if="usermessage.codeCapacities.length!==0"/>-->
<!--    </div>-->

    <div class="echarts-box">
      <div ref="chartContainer2" style="width: 900px; height: 300px; "></div>
    </div>

  </el-dialog>
  <!-- 截屏画面 -->
  <el-dialog title="监考画面" v-model:="invigilateDialog" top="2vh" width="80%">
    <h1>缩放页面{{invigilate.invigilateInfo.cutScreenNum}}次</h1>
    <h1>页面跳转{{invigilate.invigilateInfo.skipPageNum}}次</h1>
    <div class="demo-image">
      <div v-for="(img,index) in invigilate.invigilateImgs" :key="index" class="block" style="display: inline-block;margin: 2%">
        <span class="demonstration"></span>
        <el-image style="width: 100px; height: 100px" :src="'http://42.194.189.207'+img.url"/>
      </div>

    </div>
  </el-dialog>
  <!--  TODO 查看原卷-->
  <!--查看试卷 对话框-->
  <el-dialog title="查看试卷" v-model:="toViewPaper" top="2vh" width="80%" v-if="viwePaper.length != 0">
    <div class="paper-container">
      <div class="paper-header">
        <!--                    <h1>湘潭大学_____年计算机专业上机考试</h1>-->
        <h1>{{ viwePaper.title }}</h1>
      </div>

      <div class="paper-info">
        <h3>考试总分：{{ viwePaper.totalScore }}</h3>
        <h3>出卷人ID：{{ viwePaper.creatorIdName }}</h3>
        <h3>所属公司：{{ viwePaper.companyIdName }}</h3>
      </div>
      <h1>客观题</h1>
      <!--试卷内容-->
      <div class="paper-content" v-for="(item, index) in viwePaper.objectiveQuestions" :key="index">
        <h2>第 {{ index + 1 }} 题&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.title }}</h2>
        <h4>【问题描述】</h4>
        <p v-html="item.title"></p>
        <h4>【问题提示】</h4>
        <p v-html="item.hint"></p>
        <h4>【选项】</h4>
        <span v-for="(item1,index)  in item.options" v-html="item1.content" :key="index"></span>
      </div>
    </div>
    <h1>编程题</h1>
    <!--试卷内容-->
    <div class="paper-content" v-for="(item, index) in viwePaper.programmingQuestions" :key="index">
      <h2>第 {{ index + 1 }}题
        &nbsp;&nbsp;&nbsp;{{ item.problemName }}&nbsp;&nbsp;所属公司：{{ item.companyName }}</h2>
      <h4>【问题描述】</h4>
      <p v-html="item.description"></p>
      <h4>【问题提示】</h4>
      <p v-html="item.hint"></p>
      <h4>【输入格式】</h4>
      <p v-html="item.inputFormat"></p>
      <h4>【输出格式】</h4>
      <p v-html="item.outputFormat"></p>
      <h4>【输入样例】</h4>
      <p v-html="item.sampleInput"></p>
      <h4>【输出样例】</h4>
      <p v-html="item.sampleOutput"></p>
      <h4>【难度】</h4>
      <p v-html="item.problemTags"></p>
      <h4>【所属类目】</h4>
      <p v-html="item.problemCategories"></p>
      <h4>【输出样例】</h4>
      <p v-html="item.sampleOutput"></p>
      <h4>【输出样例】</h4>
      <p v-html="item.sampleOutput"></p>
    </div>
  </el-dialog>

  <!--  延迟考试-->
  <el-dialog
      v-model="delayStuTimeDialog"
      title="为该学生延迟多久"
      width="500"
      :before-close="handleClose"
  >
    <el-input-number v-model="delayTime" :min="1" :max="10000000" @change="handleChange"/>
    分钟
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="delayStuTimeDialog = false">取消</el-button>
        <el-button type="primary" @click="delayPaper()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import  《组件名称》  from '《组件路径》 ';
import API from "@/api/trainer/exam"
import PaperApi from "@/api/trainer/examPaper"
import ClassApi from "@/api/trainer/examClass"
import UserApi from "@/api/trainer/user"
import CompanyApi from "@/api/trainer/company"
import Radar from '@/components/Radar.vue'
import Skillpicture from '@/components/Skillpicture'
import Pagination from '../Pagination';
import {ElMessage, ElMessageBox} from "element-plus";
import * as echarts from 'echarts';
import 'echarts/theme/macarons';


import handleDel from "@/utils/confirmDialog"
import company from "@/api/trainer/company";

export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {Pagination,Radar,Skillpicture},
  props: {},
  // TODO 总数据
  data() {
    // 这里存放数据
    return {
      chartInstance: null,
      chartInstance2: null,
      chartData: [5, 20, 36, 10, 10, 20], // 初始数据

      //监考画面信息：
      invigilate:{
        invigilateImgs:[],
        invigilateInfo:{
          cutScreenNum:0,
          skipPageNum:0

        }
      },
      PaperRule:{
        examName: [
          {required: true, message: '请输入试卷名称', trigger: 'blur'},
          {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
        ],
        classId: [
          {required: true, message: '请选择班级', trigger: 'blur'}
        ],
        // companyId: [
        //   {required: true, message: '请选择公司', trigger: 'blur'},
        // ],
        paperId: [
          {required: true, message: '请选择试卷', trigger: 'blur'},
        ],
        startTime: [
          {required: true, message: '请选择开始时间', trigger: 'blur'},
        ],
        endTime: [
          {required: true, message: '请选择结束时间', trigger: 'blur'},
        ],
        durationTime: [
          {required: true, message: '请输入持续时间', trigger: 'blur'},
        ],
        examType: [
          {required: true, message: '请选择考试类型', trigger: 'blur'},
        ],
        languageType: [
          {required: true, message: '请选择语言类型', trigger: 'blur'},
        ]
        // applicantNum: [
        //   {required: true, message: '请选择应到人数', trigger: 'blur'},
        //   {type: 'number', message: '试题数量必须为数字值', trigger: 'blur'}
        // ]
      },
      //人物画像数据
      toviewChart: false,
      // 监考画面
      invigilateDialog:false,
      //用户画像数据
      usermessage: {
        examId: '1',
        username: 'zhangsan',
        //总体评价
        comprehensiveEvaluationDto: null,
        //异常风险提示
        abnormalRiskWarningDto: null,
        //历史成绩记录
        durationScoreRecordDto: null,
        //技能图谱
        skillMapDtoList: [],
        //编码能力
        codeCapacities: [],
        //每道题的运行情况
        codeSummarizeDtos:[]
      },



      tempStu: null,
      // 延长时间 API.delayExam()
      delayStuTimeDialog: false,
      delayTime: 0,
      // 查看试卷
      toViewPaper: false,
      viwePaper: [],

      // 临时存放考试标题
      examTitle: null,


      // TODO 修改考试数据
      updateExamVisible: false,
      updatePaperForm: {
        id: 0,
        examName: "",
        classId: null,
        companyId: null,
        paperId: null,
        startTime: "",
        endTime: "",
        creatorId: null,
        durationTime: 0,
        examType: "",
        examStatus: "PRE_EXAM",
        languageType: null,
        createTime: null,
        disabled: false,
        attendNum: 0,
        // applicantNum: 0
      },

      // TODO 查看考试详情
      ExamDetail: {},
      // 获取考试班级参数
      getExamClassStudentparams: {
        "condition": {
          "classId": this.currClass
        },
        "paging": {
          "pageIndex": this.stuCurPage,
          "pageSize": this.stuPageSize,
          "enableTotalCount": true
        }
      },
      // 获得考试详细信息参数
      examSituation: {
        extras: {},
        paging: {
          totalCount: 10,
          pageIndex: 1,
          pageSize: 100,
          enableTotalCount: true
        },
        sorts: null,
        condition: {
          examId: null,
          userId:null,
        }
      },
      // 考试人员
      examClassStuList: [],


      examLoading: true,
      svg:
          `<path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>`,
      stuExamInfo: {
        total: "",
        creator: "",
        stuId: "",
        grade: "",
        name: "",
        proQuestionList: [],
        objQuestionList: [],
        imgList: [
        ]
      },
      toReviewStuPaper: false,
      sexamDetail: [
        {
          name: "胡攀",
          disabled: false,
          usedTime: null,
          submitTime: null,
          enterTime: null,
          loginIP: null,
          grade: null,
          examName: null,
        }
      ],
      toViewStudentExamDetail: false,
      createExamVisible: false,
      createExamDetail: {
        // id: 0,
        examName: "",
        classId: null,
        companyId: null,
        paperId: null,
        startTime: "",
        endTime: "",
        creatorId: null,
        durationTime: 0,
        examType: "",
        examStatus: "PRE_EXAM",
        languageType: null,
        createTime: null,
        disabled: false,
        attendNum: 0
        // applicantNum: 0
      },
      //显示考试框
      toViewExamDetail: false,
      totalCandidateCount: 0,
      alreadySubmitCandidateCount: 0,
      exanTables: [],
      // 用户信息
      userInfoTemp: {},
      classInfoTemp: {},
      // 分页信息
      search: {
        paging: {
          totalCount: 0,
          pageIndex: 1,
          pageSize: 100,
          enableTotalCount: true
        },
        //  班级排序信息
        sorts: [],
        sortParam: {
          // Ascending Descending
          mode: "Ascending",
          fields: []
        },
        //  搜索其他信息
        condition: {},
        extras: {
          key: "",
        }
      },
      // 所有公司
      AllCompany: [],
      // 所有班级
      AllClass: [],
      AllPaper: [],
      AllLanguage: [],
      // 班级
      classParams: {
        "condition": {
          "className": null
        },
        "paging": {
          "extras": {},
          "sorts": null,
          "paging": {
            "totalCount": 10,
            "pageIndex": 1,
            "pageSize": 10,
            "enableTotalCount": true
          },
          "condition": {
            "paperId": null,
            "examName": null,
            "startTime": null,
            "examStatus": null,
            "endTime": null,
            "classIds": null
          }
        },
        "sorts": null,
        "extras": {}
      },
      //
      paperParams: {
        condition: {
          title: "",
          classId: 0
        },
        paging: {
          totalCount: 0,
          pageIndex: 0,
          pageSize: 0,
          enableTotalCount: true
        },
        sorts: [
          {
            mode: null,
            fields: null
          }
        ],
        extras: {
          key: {}
        }
      },

      //
      reviewExam: {
        examId: 0,
        userId: 0,
        classId: 0,
        companyId: 0,
        situations: [
          {
            id: 0,
            examId: 0,
            classId: 0,
            paperId: 0,
            userId: 0,
            questionId: 0,
            score: 0,
            createTime: "string"
          }
        ]
      },
      examStatus:"考试状态",

    }

  },
  // 计算属性 类似于 data 概念
  computed: {
    mergedData() {
        // 使用map方法将quesTionIntervalDtos中的timeInterval属性添加到repetitionRateDtoList中
       console.log("kkkk",this.usermessage.abnormalRiskWarningDto.repetitionRateDtoList)
        return this.usermessage.abnormalRiskWarningDto.repetitionRateDtoList.map(item => {
          const matchItem = this.usermessage.abnormalRiskWarningDto.quesTionIntervalDtos.find(q => q.questionId === item.questionId);
          return {
            ...item,
            timeInterval: matchItem ? matchItem.timeInterval : ''
          };
        });

    }
  },
  // 监控 data 中的数据变化
  // TODO 监控
  //
  watch: {},
  //TODO 方法集合


  methods: {
    //监考画面
    showInvigilate(row){

      API.getUserExamInfo(row.examId,row.userId).then(res=>{
        if(res.data.success){
          this.invigilate.invigilateImgs=res.data.data.filePathList
          if(res.data.data.typeListMap.CUT_SCREEN==null){
            this.invigilate.invigilateInfo.cutScreenNum=0
          }else {
            this.invigilate.invigilateInfo.cutScreenNum=res.data.data.typeListMap.CUT_SCREEN.length
          }
          if(res.data.data.typeListMap.SKIP_PAGE==null){
            this.invigilate.invigilateInfo.skipPageNum=0
          }else{
            this.invigilate.invigilateInfo.skipPageNum=res.data.data.typeListMap.SKIP_PAGE.length
          }
          this.invigilateDialog=true;
        }else {
          this.$message.error(res.data.message)
        }
      })
      // console.log(row)
    },
    handlerExamStatus(param){
      if(param=="IN_EXAMINATION") this.examStatus="考试中"
      if(param=="PRE_EXAM") this.examStatus="未开考"
      if(param=="OVER") this.examStatus="已结束"
      this.search.condition.examStatus=param
      this.searchExam()
    },


    //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    //一键阅卷
    gradeAll(row){
      API.oneClickReviewExam({examId:row.examId,userId:row.userId}).then(res =>{
        if(res.data.success==true) {
          this.$message.success("一键阅卷成功")
        }
      })
    },
    //重置IP
    resetIp(params) {
      const param = {
        userId: params.userId,
        examId: params.examId
      }
      handleDel("重置IP", API.resetIp, param, true);
    },
    // 开始考试
    startExam(row) {
      row.examStatus = "IN_EXAMINATION"
      API.updateExam(row).then(res => {
        if (res.data.success == true) {
          this.$message.success("已开始考试")
          this.searchExam()
        }
      }).catch(res => {
        console.log(res)
        this.$message.error(res.response.data.message)
      })
    },
    //结束考试
    endExam(row) {
      row.examStatus = "OVER"
      API.updateExam(row).then(res => {
        if (res.data.success == true) {
          this.$message.success("已结束考试")
          this.searchExam()
        }
      }).catch(res => {
        console.log(res)
        this.$message.error(res.response.data.message)
      })
    },


    delayPaper() {
      console.log(this.tempStu)
      let param = {
        userId: this.tempStu.userId,
        examId: this.tempStu.examId,
        delayTime: this.delayTime,
      }
      API.delayExam(param).then(res => {
        if (res.data.success == true) {
          this.$message.success("单独为该学生延迟成功")

        }
      }).catch(res => {

        this.$message.error("该学生已经延迟过考试时间了，无法再次延迟")

      })
      this.delayStuTimeDialog = false
    },

    // TODO 添加考生方法集合
    // 重置添加表单
    resetAdd() {
      this.examineeForm = {
        id: null,
        year: null,
        nClass: null,
        IDcard: null,
        name: null,
      }
    },
    // 添加考试学生，先校验
    getExamStu() {

    },
    //TODO 修改考试
    // 打开修改框
    openUpdateDialog(param) {

      //  不然表格惠东
      Object.assign(this.updatePaperForm, param)
      this.updatePaperForm.companyId=Number( this.updatePaperForm.companyId)
      console.log(this.updatePaperForm)
      this.updateExamVisible = true
    },
    UpdateExaminee() {
      if (this.updatePaperForm.examName == null) {
        this.$message.error("考试名称不能为空")
      } else if (this.updatePaperForm.classId == null) {
        this.$message.error("班级名称不能为空")
      }
      // else if (this.updatePaperForm.companyId == null) {
      //   this.$message.error("公司名称不能为空")
      // }
      else if (this.updatePaperForm.paperId == null) {
        this.$message.error("试卷名称不能为空")
      } else if (this.updatePaperForm.startTime == null) {
        this.$message.error("开始时间不能为空")
      } else if (this.updatePaperForm.endTime == null) {
        this.$message.error("结束时间不能为空")
      } else if (this.updatePaperForm.durationTime == null||this.updatePaperForm.durationTime==0) {
        this.$message.error("持续时间不能为0")
      } else if (this.updatePaperForm.examType == null) {
        this.$message.error("考试类型不能为空")
      } else if (this.updatePaperForm.languageType == null) {
        this.$message.error("语言类型不能为空")
      }
      // else if (this.updatePaperForm.applicantNum == null||this.updatePaperForm.applicantNum==0) {
      //   this.$message.error("应到人数不能为0")
      // }
      else {
        API.updateExam(this.updatePaperForm).then(res => {
          if (res.data.success == true) {
            this.$message.success("更新考试成功")
            this.searchExam()
            this.updateExamVisible = false
          } else {
            // this.$message.error()
          }
        }).catch(() => {
          ElMessage.error({
            message: '更新考试失败'
          });
        });
      }
    },

    //TODO 考试详情
    // 查看考试试卷
    async requestPaperDetail() {
      console.log("hiauowehfiuwehfweiguf")
      console.log(this.ExamDetail)
      PaperApi.paperDetailedInfo(this.ExamDetail.paperId,"ALL_QUESTIONS").then(async res => {
        if (res.data.success == true) {
          this.$message.success("获取试卷信息成功")
          // this.paperDetail=res.data.data
          // this.search.paging.totalCount=res.data.totalCount
          this.toViewPaper = true
          this.viwePaper = res.data.data
          let temp = this.AllCompany.filter(company => company.id == this.viwePaper.companyId)
          if (temp != []) {
            this.viwePaper.companyIdName = temp[0].name
          } else {
            this.viwePaper.companyIdName = "该公司不存在"
          }
          await this.getUserInfo(this.viwePaper.creatorId, "paper")

          console.log(this.viwePaper)
        } else {
          this.$message.error("获取失败")
        }
      }).catch(res => {
        console.log(res)
      })
    },
    // TODO批量阅卷
    batchMarking(){
      if(this.alreadySubmitCandidateCount === this.examClassStuList.length){
        API.batchMarking(this.ExamDetail.id).then().then(res => {
          if (res.data.success == true) {
            this.$message.success("批量阅卷成功")
            // this.paperDetail=res.data.data
            // this.search.paging.totalCount=res.data.totalCount
          } else {
            this.$message.error(res.data.message)
          }
        }).catch(res => {
          console.log(res)
        })
      }else {
        this.$message.error("请先将所有学生全部提交后，再进行批量阅卷")
      }
    },
    //获得考试成绩的答题情况
    getExamGradeInfo() {
      API.getUserExamInfo(this.examSituation.condition.examId).then(res => {
        if (res.data.success == true) {
          // this.
        }
      })
    },
    // 搜索考试情况的学生


    // 查看考试细节
    viewExamDetail(param) {
      this.toViewExamDetail = true
      this.ExamDetail = param
      this.examTitle = param.examName
      // this.stuExamInfo.creator=param.
      // this.getExamClassStudentparams.condition.classId = param.classId
      this.examSituation.condition.examId= param.id
      this.examSituation.userId=null
      // this.getExamClassStu(this.getExamClassStudentparams)
      this.getExamClassStu()

      console.log("exam",param)
    },
    // 获得考试人员
    getExamClassStu() {
      // ClassApi.getExamClassStudent(this.getExamClassStudentparams).then(res => {
      //   if (res.data.success == true) {
      //     this.examClassStuList = res.data.data.filter(data => data !== null)
      //   }
      // }).catch(res => {
      //   this.$message.error("获取考试人员出错")
      // })
      API.examSituation(this.examSituation).then(res => {
        if (res.data.success == true) {
          this.examClassStuList = res.data.data.filter(data => data !== null)
          this.$message.success("获取考试人员成功")
          console.log("exam",this.examClassStuList)
          this.alreadySubmitCandidateCount=this.examClassStuList.filter(stu => stu.type != "NOT_SUBMIT").length
        }
      }).catch(res => {
        this.$message.error("获取考试人员出错")
      })
    },
    // 重置考试
    reseteExamine(param) {
      console.log(param)
      const obj={
        examId:param.examId,
        userId:param.userId
      }
      API.resetExam(obj).then(res=>{
        if(res.data.success==true){
          this.$message.success("重置该考生考试内容成功")
        }
      })

    },
    //  删除考试提示框

    // 删除考试
    deleteExaminee(param) {
      ElMessageBox.confirm('此操作将禁用该考试, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        param.disabled = true
        API.updateExam(param).then(res => {
          if (res.data.success == true) {
            this.$message.success("删除考试成功")
            this.searchExam()
          } else {
            this.$message.error()
          }
        })
        ElMessage.success({
          message: '删除成功!'
        });
      }).catch(() => {
        ElMessage.info({
          message: '已取消删除'
        });
      });
    },
    // TODO下载成绩
    downloadExcel() {
      API.downloadExcel(this.ExamDetail.id).then(res => {
        console.log(res)

        const url = window.URL.createObjectURL(new Blob([res.data]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', this.examTitle + '考试成绩列表.xlsx')
        document.body.appendChild(link)
        link.click()
        URL.revokeObjectURL(link.href) // 释放URL 对象
        document.body.removeChild(link)
        link = null
      })
    },
    // 下载答卷
    downloadZip() {
        API.exportSubmit(this.ExamDetail.id).then(res => {
          console.log(res)

          const url = window.URL.createObjectURL(new Blob([res.data]))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', this.examTitle + '提交记录列表.xlsx')
          document.body.appendChild(link)
          link.click()
          URL.revokeObjectURL(link.href) // 释放URL 对象
          document.body.removeChild(link)
          link = null
        })
    },
    // 查看原卷
    viewOriginPaper() {
      this.$message("功能未完成")
    },
    // 查看用户图像
    checkStuPicture(row) {
      console.log(row,'row')
      this.usermessage.examId = row.examId;
      this.usermessage.userId = row.userId;
      let examChartparams = {
        "examId": row.examId,
        "userId": this.usermessage.userId
      }
      API.examChart(examChartparams).then(res => {
        console.log(res)

        if (res.data.success === true) {
          let p1 = new Promise((resolve) => {
            this.usermessage = res.data.content
            this.$message.success("获取成功")
            console.log("CSP用户图像放回数据: ",this.usermessage)
            resolve()
          }).then(()=>{
            this.myEcharts()
            this.myEcharts2()
          })

        } else {
          this.$message.error(res.dada)
        }
      })

      this.toviewChart = true

    },

    myEcharts2(){
      let codeCapacities = this.usermessage.codeCapacities;
      let efficientTime = this.usermessage.efficientTime
      let maxEfficientTime = this.usermessage.maxEfficientTime
      let avgValues = [];
      const indicators = ['score', 'codeEfficiency', 'codeSpecification', 'codeSpeed', 'Thinking'];
      let codE = 0
      for (let i = 0; i < indicators.length - 2; i++) {
        let sum = 0;
        for (let j = 0; j < codeCapacities.length; j++) {
          if (i===0) sum += (codeCapacities[j].score / codeCapacities[j].questionSore);
          else
              sum += codeCapacities[j][indicators[i]];
        }
       if (i===1) codE = sum / codeCapacities.length
        avgValues.push((sum / codeCapacities.length).toFixed(2)); // 取平均值，并保留一位小数
      }
      avgValues.push(maxEfficientTime === 0? 0 : (efficientTime / maxEfficientTime).toFixed(2));
      let tk = (((efficientTime / maxEfficientTime) + codE) / 2).toFixed(2)
      avgValues.push(tk)
      console.log("avgValues: ",avgValues)
      const container = this.$refs.chartContainer2;
      if (container) {
        this.chartInstance2 = echarts.init(container, 'macarons');
        const option = {
          radar: [
            {
              indicator: [
                { name: '正确性', max: 1 },
                { name: '代码效率', max: 1},
                { name: '代码规范', max: 100 },
                { name: '作答速度', max: 1},
                { name: '做题思路', max: 1 }
              ],
              radius:120,
              splitNumber:5,
              axisName:{
                formatter:"{value}",
                color:"#428BD4"
              }
            }
          ],
          series: [
            {
              type: 'radar',
              data: [
                {
                  value: avgValues,
                  name: '平均值',
                }
              ]
            }
          ]
        };
        this.chartInstance2.setOption(option);
      }
    },

    myEcharts(){
      console.log("mydata",this.usermessage)
      const yAxisData = this.usermessage.skillMapDtoList.map(item => item.tagName);
      const seriesData = this.usermessage.skillMapDtoList.map(item => ({
        value: item.score * 100
      }))
      const container = this.$refs.chartContainer;
      if (container) {
        this.chartInstance = echarts.init(container, 'macarons');
        const option = {
          xAxis: {
            type: "value",
            min: 0,
            max: 100,
          },
          yAxis: {
            data: yAxisData
          },
          series: [{
            data: seriesData,
            type: "bar",
            legendHoverLink: true,
            label: {
              show: true,
              position: 'insideRight', // 柱状图上显示具体数值的位置
              formatter: '{c}%' // 显示百分比
            }
          }]
        };
        this.chartInstance.setOption(option);
      }
    },


    // TODO 手动阅卷
    reviewStuPaper(row) {
      this.toReviewStuPaper = true
      PaperApi.paperDetailedInfo(this.ExamDetail.paperId,"ALL_QUESTIONS").then(res => {
        if (res.data.success == true) {
          const paper = res.data.data
          API.getUserExamInfo(row.examId, row.userId).then(res => {
            if (res.data.success == true) {
              this.stuExamInfo.total=paper.totalScore
              this.stuExamInfo.stuId = res.data.data.userId
              this.stuExamInfo.name = res.data.data.username
              this.stuExamInfo.score=res.data.data.score
              // let score=0;
              // res.data.data.forEach(question =>{
              //   score+=question.score
              // })
              this.stuExamInfo.proQuestionList = res.data.data.answerList.filter(question => question.questionType === "PROGRAMMING_QUESTION")
              this.stuExamInfo.proQuestionList.forEach(question => {
                paper.programmingQuestions.forEach(paperQuestion => {
                  if (paperQuestion.problemId == question.questionId) {
                    question.problem_description = paperQuestion.description
                  }
                  if(question.singleQuesScore==null){
                    question.singleQuesScore={
                      score:false
                    }
                  }
                })
              }
              )
              this.stuExamInfo.objQuestionList = res.data.data.answerList.filter(question => question.questionType === "OBJECTIVE_QUESTION")
              this.stuExamInfo.objQuestionList.forEach(paperQuestion => {
                paper.objectiveQuestions.forEach(obj=>{
                  if(paperQuestion.questionId==obj.id){
                    paperQuestion.problem_description=obj.title
                    if(paperQuestion.content!=null){
                      paperQuestion.content=obj.options.filter(option => option.id==paperQuestion.content)[0].content
                    }
                  }
                })
                if(paperQuestion.singleQuesScore==null){
                  paperQuestion.singleQuesScore={
                    score:false
                  }
                }})
              this.stuExamInfo.imgList = res.data.data.filePathList
              console.log(this.stuExamInfo)
              console.log( paper.objectiveQuestions)
            }
          })
        }
      })


    },
    // 阅卷成功
    confirmReviewStuPaper(){
      this.reviewExam.examId=this.ExamDetail.id
      this.reviewExam.userId=this.stuExamInfo.stuId
      this.reviewExam.classId=this.ExamDetail.classId
      this.reviewExam.companyId=this.ExamDetail.companyId
      let situations=[]
      let total=0;
      this.stuExamInfo.proQuestionList.forEach(question=>{
        const temp = {
          examId:question.examId,
          classId:this.ExamDetail.classId,
          paperId:question.paperId,
          userId:this.stuExamInfo.stuId,
          questionId:question.questionId,
          score:question.singleQuesScore.score,
          createTime:question.singleQuesScore.createTime
        }
        total+=temp.score
        situations.push(temp)
      })
      this.reviewExam.situations=situations
      if(total>this.stuExamInfo.total){
        this.$message.error("所选分数之和大于总分")
      }else {
        API.reviewExam(this.reviewExam).then(res=>{
          if(res.data.success==true){
            this.$message.success("阅卷完成")
            this.getExamClassStu()
            this.toReviewStuPaper=false
          }
        })
      }

    },

    // 获得所有语言
    getAllLanguage() {
      CompanyApi.getAllLanguage().then(res => {
        if (res.data.success == true) {
          this.AllLanguage = res.data.content
        }
      }).catch(res => {
        this.$message.error(res)
      })
    },

    // 刷新
    requestExam() {
      this.$router.go(0)
    },
    async getClassInfo(param) {
      await ClassApi.getClassInfo(param).then(res => {
        if (res.data.success == true) {
          if (res.data.data == null) {
            this.classInfoTemp = {
              className: "班级未搜索到",
            }
          } else {
            this.classInfoTemp = res.data.data
          }
        }
      }).catch(res => {
        this.$message.error(res)
      })
    },
    // 获取用户信息
    async getUserInfo(param,flag) {
      await UserApi.getUserInfo(param).then(res => {
        if (res.data.success == true) {
          this.userInfoTemp = res.data.content
          if (res.data.content.records.length == 0) {
            const test = {
              records: [
                {username: "创建人查询失败"}
              ]
            }
            if(flag=="list"){
              Object.assign(this.userInfoTemp, test)
            }
          }
          if(flag=="paper"){
            this.viwePaper.creatorIdName=res.data.content.records[0].username
          }
        }
      }).catch(res => {
        this.$message.error(res)
      })
    },
    // 搜索考试
    searchExam() {
      // this.search.condition.examStatus="OVER"
      this.examLoading = true
      API.getExam(this.search).then(async res => {
        if (res.data.success === true) {
          for (const exam of res.data.data) {
            if (exam.creatorId === null) {
              exam.creatorIdName = "无创建人"
            } else {
              await this.getUserInfo(exam.creatorId,"list")
              exam.creatorIdName = this.userInfoTemp.records[0].username
            }
            if (exam.classId === null) {
              exam.classIdName = "无班级"
            } else {
              await this.getClassInfo(exam.classId)
              exam.classIdName = this.classInfoTemp.className
            }
            if (exam.companyId === null) {
              exam.companyIdName = "无公司"
            } else {
              let conpanyFlag = false
              this.AllCompany.forEach(company => {
                if (exam.companyId == company.id) {
                  exam.companyIdName = company.name
                  conpanyFlag = true
                }
              })
              if (conpanyFlag == false) {
                exam.companyIdName = "未搜索到公司"
              }
            }
          }
          this.exanTables = res.data.data
          this.search.paging.totalCount = res.data.totalCount
          this.$message.success("获取考试信息成功")
          this.examLoading = false
        } else {
          this.$message.error("获取考试信息失败，请联系管理员")
        }
      }).catch(res => {
        this.$message.error(res)
      })
    }
    ,
    getAllCompanyList() {
      CompanyApi.getAllCompany().then(res => {
        if (res.data.success == true) {
          this.AllCompany = res.data.content
        }
      }).catch(res => {
        this.$message(res)
      })
    },
    getAllPaperList() {
      const PaperParam = {
        condition: {
          title: null,
          classId: null
        }
      }
      PaperApi.getAllPaper(PaperParam).then(res => {
        if (res.data.success == true) {
          this.$message.success("获取试卷信息成功")

          let  result=res.data.data
          this.AllPaper = result
        } else {
          this.$message.error("获取试卷信息失败")
        }
      })
    },
    getAllClass() {
      ClassApi.getAllExamClass(this.classParams).then(res => {
        if (res.data.success == true) {
          this.$message.success("获取所有班级信息成功")
          this.AllClass = res.data.data
          console.log(this.AllClass)
        } else {
          this.$message.error("获取所有班级信息失败")
        }
      }).catch(res => {
        console.log("eroor")
        this.$message.error(res)
      })
    },
    initCreateExamDetail() {
      this.createExamDetail = {
        // id: 0,
        examName: "",
        classId: null,
        companyId: null,
        paperId: null,
        startTime: "",
        endTime: "",
        creatorId: 0,
        durationTime: 0,
        examType: "",
        examStatus: null,
        languageType: null,
        createTime: null,
        disabled: false,
        attendNum: 0,
        applicantNum: 0
      }
    },

    toCreateExam() {
      this.createExamVisible = true,
          this.getAllClass()

    },
    // 格式化考试时间
    formatTime(timeStr) {
      return timeStr.replace(/(\d{2})\s(\d{1})\s(\d{1})/, "$1 $2:00:00"); // 转换为标准格式
    },

    // 创建考试
    createExam() {
      const formattedStartTime = this.createExamDetail.startTime
      this.formatTime(formattedStartTime);
      const formattedEndTime = this.createExamDetail.endTime
      this.formatTime(formattedEndTime);
      const date1 = new Date(formattedStartTime);
      const date2 = new Date(formattedEndTime);
      if (date1 >= date2) {
        this.$message.error("考试开始时间不能大于考试结束时间")
      }else if (this.createExamDetail.examName == null) {
        this.$message.error("考试名称不能为空")
      } else if (this.createExamDetail.classId == null) {
        this.$message.error("班级名称不能为空")
      }
      // else if (this.createExamDetail.companyId == null) {
      //   this.$message.error("公司名称不能为空")
      // }
      else if (this.createExamDetail.paperId == null) {
        this.$message.error("试卷名称不能为空")
      } else if (this.createExamDetail.startTime == "") {
        this.$message.error("开始时间不能为空")
      } else if (this.createExamDetail.endTime == "") {
        this.$message.error("结束时间不能为空")
      } else if (this.createExamDetail.durationTime == null||this.createExamDetail.durationTime==0) {
        this.$message.error("持续时间不能为0")
      } else if (this.createExamDetail.examType == null) {
        this.$message.error("考试类型不能为空")
      } else if (this.createExamDetail.languageType == null) {
        this.$message.error("语言类型不能为空")
      }
      // else if (this.createExamDetail.applicantNum == null||this.createExamDetail.applicantNum==0) {
      //   this.$message.error("应到人数不能为0")
      // }
      else {

        API.createExam(this.createExamDetail).then(res => {
          if (res.data.success == true) {
            this.$message.success("创建考试")
            this.searchExam()
            this.initCreateExamDetail()
          } else {
            // this.$message.error(res)
          }
        }).catch(res => {
          // this.$message.error()
          this.initCreateExamDetail()
        })
        this.createExamVisible = false
      }
    }
  }
  ,
// 生命周期 - 创建完成（可以访问当前this 实例）
  setup() {
  }
  ,
//  TODO 挂载
// 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
    this.searchExam()
    this.getAllCompanyList()
    this.getAllLanguage()
    this.getAllPaperList()
    this.getAllClass()
    // const timestamp = Date.now();
    // const dateObject = new Date(timestamp);
    //
    // const year = dateObject.getFullYear();
    // const month = String(dateObject.getMonth() + 1).padStart(2, '0');
    // const day = String(dateObject.getDate()).padStart(2, '0');
    // const hours = String(dateObject.getHours()).padStart(2, '0');
    // const minutes = String(dateObject.getMinutes()).padStart(2, '0');
    // const seconds = String(dateObject.getSeconds()).padStart(2, '0');
    //
    // const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    // this.createExamDetail.createTime=formattedDateTime
  }
  ,
  onBeforeMount() {
  }
  , // 生命周期 - 挂载之前
  onBeforeUpdate() {
  }
  , // 生命周期 - 更新之前
  onUpdated() {
  }
  , // 生命周期 - 更新之后
  onBeforeUnmount() {
  }
  , // 生命周期 - 销毁之前
  onUnmounted() {
  }
  , // 生命周期 - 销毁完成
  onErrorCaptured() {
  } // 如果页面有 keep-alive 缓存功能,这个函数会触发
}
</script>


<style scoped>
.example-showcase .el-loading-mask {
  z-index: 9;
}

.exam {
  width: 100%;
}

.filter-container {
  padding-bottom: 10px;
}

.filter-item {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
}

.item-input {
  width: 200px;
  margin-right: 5px;
}

.filter-container .filter-item:nth-child(4), .filter-container .filter-item:nth-child(5) {
  margin-left: 6px;
}

.exam-list {
  width: 100%;
}

.pagination-container {
  margin-top: 30px;
}

.exam-list .col2-cell-style {
  color: #409EFF;
  cursor: pointer;
}

.filter-bar {
  width: 100%;
  padding-bottom: 10px;
}

.filter-bar .el-input {
  width: 200px;
  margin-right: 5px;
}

.filter-bar .item-margin-left-16 {
  margin-left: 16px;
}

.el-dialog .el-table .col2-cell-style {
  color: #409EFF;
  cursor: pointer;
}

.el-dialog .stu-paper-container {
  margin: 0 20px;
}

.el-dialog .stu-paper-container h1 {
  text-align: center;
  font-size: 2.5em;
}

.el-dialog .stu-paper-container h3 {
  text-align: left;
}

.el-dialog .stu-paper-container .el-row {
  margin-bottom: 30px;
}

.el-dialog .stu-paper-container .stu-answer {
  margin-left: 20px;
}

.el-dialog .stu-paper-container .stu-paper-footer {
  text-align: right;
  margin-top: 30px;
}

.el-dialog .paper-container {
  margin: 0 20px;
}

.el-dialog .paper-container .paper-header h1 {
  text-align: center;
  font-size: 2.5em;
}

.el-dialog .paper-container .paper-info {
  text-align: center;
  padding: 20px;
}

.el-dialog .paper-container .paper-info h3 {
  display: inline-block;
  width: 25%;
}

.paper-container .paper-content {
  padding: 20px;
}

.filter-bar .el-progress {
  margin-left: 20px;
}


/*.button-container .el-button {*/
/*  width: 30%; !* 调整为小于50%以确保换行 *!*/
/*  margin-bottom: 5%; !* 可选，添加一些垂直间距 *!*/
/*}*/
</style>
